* {
    padding: 0;
    margin: 0;
}
.content {
    width: 100vw;
    height: 100vh;
    background-color: #eeeeee;
    display: flex;
    justify-content: center;
    align-items: center;
    .content-wrapper {
        width: 65vw;
        height: 70vh;
        display: flex;
        justify-content: center;
        align-items: center;
        .nav {
            height: 80%;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0 10px;
            .logo {
                margin: 50px 0;
                img {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                }
            }
            .nav-item {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                position: relative;
                cursor: pointer;
                span {
                    color: #6d679e;
                    font-size: 12px;
                    text-align: center;
                    font-family: "Leelawadee", Courier, monospace;
                }
                img {
                    width: 40px;
                    height: 40px;
                }
                .block {
                    width: 4px;
                    height: 80%;
                    background-color: #251aeb;
                    border-radius: 20px;
                    opacity: 0;
                    transition: 0.2s;
                    position: absolute;
                    left: -15px;
                }
                &:hover {
                    .block {
                        opacity: 1;
                    }
                }
            }
        }
        .center {
            width: 55%;
            height: 100%;
            position: relative;
            font-family: "Leelawadee", Courier, monospace;
            overflow: hidden;
            transition: 0.5s;
            .sigin-img-wrapper {
                transition: 0.5s;
                width: 100%;
                height: 100%;
                background: url(./asset/sigin-img.gif) no-repeat #251aeb;
                background-size: 55%;
                background-position: center right;
                .img-tips {
                    position: absolute;
                    margin: 40px;
                    z-index: 2;
                    color: #fff;
                    h1 {
                        font-size: 40px;
                        letter-spacing: 2px;
                    }
                    h5 {
                        font-weight: 100;
                    }
                }
            }
            .sigup-img-wrapper {
                transition: 0.5s;
                width: 100%;
                height: 100%;
                background: url(./asset/sigup-img.gif) no-repeat #251aeb;
                background-size: contain;
                background-position: center right;
                .img-tips {
                    position: absolute;
                    margin: 40px;
                    z-index: 2;
                    color: #fff;
                    h1 {
                        font-size: 40px;
                        letter-spacing: 2px;
                    }
                    h5 {
                        font-weight: 100;
                    }
                }
            }
        }
        .form {
            width: 35%;
            height: 80%;
            background-color: #fff;
            .form-wrapper {
                width: 100%;
                height: 100%;
                padding: 30px;
                box-sizing: border-box;
                position: relative;
                overflow: hidden;
                .common-style {
                    width: 80%;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    .title {
                        margin: 10% 0;
                        font-size: 18px;
                        font-family: "Leelawadee", Courier, monospace;
                        span:first-child {
                            color: #acaabe;
                        }
                        span:last-child {
                            color: #251aeb;
                            cursor: pointer;
                        }
                    }
                    .inputs-wrapper {
                        .inputs-item {
                            position: relative;
                            margin: 10px 0;
                            .input-tips {
                                color: #8783b1;
                                font-weight: 600;
                                margin: 5px 0;
                                display: inline-block;
                                font-family: "Leelawadee", Courier, monospace;
                            }
                            .inputs {
                                display: block;
                                width: 100%;
                                height: 50px;
                                border-radius: 10px;
                                outline: none;
                                border: 1px solid #c6c5ce;
                                font-size: 20px;
                                padding-right: 50px;
                                padding-left: 10px;
                                font-family: "Leelawadee", Courier, monospace;
                                box-sizing: border-box;
                                color: #251aeb;
                                &:focus {
                                    border: 1px solid #c0d1ff;
                                    box-sizing: border-box;
                                }
                            }
                            &::after {
                                content: "";
                                display: block;
                                width: 50px;
                                height: 50px;
                                position: absolute;
                                right: -10px;
                                top: 40px;
                            }
                        }
                        .items-email {
                            &:after {
                                background: url(./asset/email.png) no-repeat;
                                background-size: 30px;
                            }
                        }
                        .items-pwd {
                            &:after {
                                background: url(./asset/pwd.png) no-repeat;
                                background-size: 30px;
                            }
                        }
                        .items-user {
                            &:after {
                                background: url(./asset/user.png) no-repeat;
                                background-size: 30px;
                            }
                        }
                    }
                    .sigin-btn {
                        width: 100%;
                        height: 50px;
                        background-color: #1f1567;
                        border-radius: 10px;
                        color: #fff;
                        margin-top: 20px;
                        font-family: "Leelawadee", Courier, monospace;
                        font-size: 20px;
                        cursor: pointer;
                        border: 0;
                    }
                    .tips {
                        margin-top: 20px;
                        color: #c6c5ce;
                    }
                }
                .sigin {
                    opacity: 1;
                    z-index: 1;
                    transform: 0.5s;
                }
                .sigup {
                    z-index: -1;
                    .animations {
                        transform: translate(-10%, 0);
                        opacity: 0;
                    }
                }
            }
        }
    }
}
.nav-form-animation-bottom {
    animation: .5s form-nav-animation-bottom;
}
.nav-form-animation-top {
    animation: .5s form-nav-animation-top;
}

@keyframes form-nav-animation-bottom {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(0, 20px);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes form-nav-animation-top {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(0, -20px);
    }
    100% {
        transform: translate(0, 0);
    }
}